<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
   <textarea style="width: 800px;height: 800px;" id="tip" ></textarea>
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="../../js/echarts-all-3.js"></script>
       <script type="text/javascript" src="../../js/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="../../js/extension/jquery-2.2.4.js"></script>
       <script type="text/javascript" src="../../js/map/js/china.js"></script>
       <script type="text/javascript" src="../../js/map/js/world.js"></script>
       <script type="text/javascript" src="../../js/api.js"></script>
       <script type="text/javascript" src="../../js/extension/bmap.min.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
myChart.showLoading();
$.get('les-miserables.gexf', function (xml) {
    myChart.hideLoading();

    var graph = echarts.dataTool.gexf.parse(xml);
    document.getElementById("tip").value = JSON.stringify(graph);
    var categories = [];
    for (var i = 0; i < 9; i++) {
        categories[i] = {
            name: '类目' + i
        };
    }
    //categories = ["1","2","3"];

    graph.nodes.forEach(function (node) {
        node.itemStyle = null;
        node.value = node.symbolSize;
        node.symbolSize /= 1.5;
        node.label = {
            normal: {
                show: node.symbolSize > 30
            }
        };
        node.category = node.attributes.modularity_class;   //读取节点属性 modularity_class的value
    });
    option = {
        toolbox: {
            show : true,
            feature : {
                dataView : {show: true, readOnly: false},
                saveAsImage : {show: true}
                /* mark : '辅助线开关',
                 markUndo : '删除辅助线',
                 markClear : '清空辅助线',
                 dataZoom : '区域缩放',
                 dataZoomReset : '区域缩放后退',
                 dataView : '数据视图',
                 lineChart : '折线图切换',
                 barChart : '柱形图切换',
                 restore : '还原',
                 saveAsImage : '保存为图片'*/
            }
        },
        title: {
            text: '人物关系网',
            subtext: '统计人：栾鹏',
            top: 'bottom',
            left: 'right'
        },
        tooltip: {},
        legend: [{
            // selectedMode: 'single',
            data: categories.map(function (a) {
                return a.name;
            })
        }],
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        series : [
            {
                name: '重点人物',
                type: 'graph',
                layout: 'circular',   //'circular',圆形分布   force力导引 可拖拽节点   none我空
              // draggable: true,   //节点是否可拖拽，只在使用力引导布局的时候有用。
                //力引导布局相关的配置项
                /*force: {
                    // initLayout: 'circular'   //进行力引导布局前的初始化布局，初始化布局会影响到力引导的效果。  默认不进行任何布局，使用节点中提供的 x， y 作为节点的位置。如果不存
                    // gravity: 0.1   //节点受到的向中心的引力因子。
                    repulsion: 50,   //节点之间的斥力因子
                    edgeLength: 30   //边的两个节点之间的距离
                },*/
                data: graph.nodes,
                links: graph.links,
                categories: categories,
                roam: true,   //是否开启鼠标缩放和平移漫游   如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'
                focusNodeAdjacency: true,  //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
                label: {
                    normal: {
                        position: 'right',
                        formatter: '{b}'
                    }
                },
                lineStyle: {
                    normal: {
                        color: 'source',
                        curveness: 0.3    //弯曲程度
                    }
                }
            }
        ]
    };

    myChart.setOption(option);
}, 'xml');
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>